<template>
  <div class="home">
    <button @click="changeColor">点击切换颜色</button>
    <div id="a" v-backcolor="$store.state.color"></div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
  // 局部自定义指令
  directives: {
    // backcolor 自定义指令的名字
    // backcolor: {
    //   beforeMount(el, binding) {
    //     // el就是指令绑定时所在的元素
    //     // console.log(el);
    //     // binding是一个对象 对象中的value就是给指令的值
    //     // console.log(binding);
    //     let w = Math.random() * 300 + 50 // 随机一个尺寸出来
    //     el.style.width = w + 'px'
    //     el.style.height = w + 'px'
    //     el.style.background = binding.value

    //   },


    //   updated(el, binding) {
    //     // console.log(binding);
    //     el.style.background = binding.value
    //   },
    // }
  },

  setup() {
    let store = useStore()
    let color = ref('red')
    function changeColor() {
      // color.value = '#' + Math.random().toString(16).substr(2, 6);
      store.commit('changeColor')
    }

    return {
      color,
      changeColor
    }
  }
}
</script>
